<template>
	<div class="app-container">
		<div class="content">			  
			  <el-form :model="form" :rules="rules" ref="form" label-width="160px" class="demo-ruleForm">
			    <el-form-item label="请输入原支付密码：" class="is-required paysetpwd_codeintwp" prop='oldPayPassword' v-if="!vshow">
			      <div class="intwp">
			      	<el-input type="password" v-model="form.oldPayPassword" auto-complete="off" size='mini' class='moneyint' placeholder=""></el-input>
			      </div>
			      <p style="color: #999999;font-size: 12px;position: relative;top: -15px;">请输入六位数字的原支付密码</p>
			    </el-form-item>
			    <el-form-item label="请输入支付密码：" class="is-required paysetpwd_codeintwp" prop='newPayPassword'>
			      <div class="intwp">
			      	<el-input type="password" v-model="form.newPayPassword" auto-complete="off" size='mini' placeholder=""></el-input>
			      </div>
			      <p style="color: #999999;font-size: 12px;position: relative;top: -15px;">请输入六位数字的支付密码</p>
			    </el-form-item>
			    <el-form-item label="请重新输入支付密码：" class="is-required" prop='newPayPassword2'>
			      <div class="intwp">
			      	<el-input type="password" v-model="form.newPayPassword2" auto-complete="off" size='mini' placeholder=''></el-input>
			      </div>
			    </el-form-item>
			    <el-form-item label="短信验证码：" class="is-required paysetpwd_codeintwp" prop='code'>
			      <div class="intwp">
			      	<el-input v-model="form.code" auto-complete="off" size='mini' class='codeint'></el-input>
			      	<el-button @click='getnumber2' :disabled="!show" size='mini'>
                      <span v-show="show">获取验证码</span>
                      <span v-show="!show" class="count">{{count}} s</span>
                    </el-button>
			      </div>
			      <p style="color: #999999;font-size: 12px;position: relative;top: -15px;">请使用手机{{phoneNumber | hideMiddle}}获取验证码</p>
			    </el-form-item>
			    
			     <el-form-item>
			     	<el-button type="info" @click="$router.back(-1)" size='small'>取消</el-button>
				    <el-button type="primary" @click="submitgo('form')" size='small'>确定</el-button>
				 </el-form-item>
			  </el-form>
		</div>
	</div>
</template>

<script>
import Vue from 'vue'
const TIME_COUNT = 60;
export default{
	data(){
			var oldpas = (rule,value,callback)=>{
				var regx = /^\d{6}$/;				
				if(!regx.test(value)){
					callback(new Error('请输入正确的原支付密码'));
					//this.show2=true
				}else{
//					if (regx.test(this.form.newPayPassword) && this.form.newPayPassword==this.form.newPayPassword2) {
//						this.show2=false
//					}else{
//						this.show2=true
//					}
					callback();
				}
			};
			var oldpas2 = (rule,value,callback)=>{
				var regx = /^\d{6}$/;				
				if(!regx.test(value)){
					callback(new Error('请输入正确格式的支付密码'));
					//this.show2=true
				}else{
//					if (regx.test(this.form.oldPayPassword) && value==this.form.newPayPassword2) {
//						this.show2=false
//					}else{
//						this.show2=true
//					}
					callback();
				}
			};
		  var validatePass = (rule, value, callback) => {
		  	//var regx = /^\d{6}$/;
	        if (value === '') {
	          callback(new Error('请输入新密码'));
	          //this.show2=true
	        } else {
	          if (this.form.newPayPassword2 !== '') {
	            this.$refs.form.validateField('newPayPassword2');
	          }
	          else{
//	          	if (regx.test(this.form.oldPayPassword) && value==this.form.newPayPassword2) {
//						this.show2=false
//					}else{
//						this.show2=true
//					}
	          }
	          callback();
	        }
	      };
	      var validatePass2 = (rule, value, callback) => {
	      	//var regx = /^\d{6}$/;
	        if (value === '') {
	          callback(new Error('请再次输入密码'));
	          //this.show2=true
	        } else if (value !== this.form.newPayPassword) {
	          callback(new Error('两次输入密码不一致!'));
	          //this.show2=true
	        }
	        else {
//	        	if (regx.test(this.form.oldPayPassword) && regx.test(this.form.newPayPassword) ) {
//					this.show2=false
//				}else{
//					this.show2=true
//				}
	          callback();
	        }
	      };
		return{
			vshow:false,
			phoneNumber:'-',
			form:{
				code:'',
				oldPayPassword:'',
				newPayPassword:'',
				newPayPassword2:'',
				securitycode:null,//安全码
			},
			rules:{
				oldPayPassword:[{ required: !this.vshow, message: '请输入旧支付密码', trigger: 'blur' },
								{ validator: oldpas, trigger: 'blur' }],
				code:[{ required: true, message: '请输入手机验证码', trigger: 'blur' },],				
				newPayPassword:[{ validator: validatePass, trigger: 'blur' },
								{ validator: oldpas2, trigger: 'blur' }],
				newPayPassword2:[{ validator: validatePass2, trigger: 'blur' },],
			},
			show: true,
			show2: false,
			count: '',
      		timer: null,      		
		}
	},
	mounted(){
		this.isTrue();
	},
	watch:{

	},
	filters: {
        moneydou(val){
        	val = val.toString().replace(/\$|\,/g,'');
		    if(isNaN(val)) {
		      val = "0";  
		    } 
		    let sign = (val == (val = Math.abs(val)));
		    val = Math.floor(val*100+0.50000000001);
		    let cents = val%100;
		    val = Math.floor(val/100).toString();
		    if(cents<10) {
		       cents = "0" + cents
		    }
		    for (var i = 0; i < Math.floor((val.length-(1+i))/3); i++) {
		        val = val.substring(0,val.length-(4*i+3))+',' + val.substring(val.length-(4*i+3));
		    }
		
		    return (((sign)?'':'-') + val + '.' + cents);
		},
		hideMiddle(val) {
            if(val && val!=''){
            	return `${val.substring(0,3)}****${val.substring(val.length-4)}`;
            }
        }
    },
	methods:{
		isTrue(){
			let params ={};
			this.post(params,'services/app/applets/CheckEnterpriseSetPwd').then(res=>{
				if (res.success) {
					if (res.result.hadPwd==true) {
						this.vshow = false;
					} else{
						this.vshow = true;
					}
					this.phoneNumber = res.result.smsPhoneNumber;
				}else{
					
				}
			})
		},
	    getnumber2() {
	      console.log(this.show)
	      if (!this.timer) {
	        this.count = TIME_COUNT;
	        this.show = false;
	        this.getnumber3();
	        this.timer = setInterval(() => {
	          if (this.count > 0 && this.count <= TIME_COUNT) {
	            this.count--;
	          } else {
	            this.show = true;
	            clearInterval(this.timer);
	            this.timer = null;
	          }
	        }, 1000)
	      }
	    },
	    //第一个验证码发送
	    getnumber3() {
	      let params = {}
	      this.post(params, 'services/app/applets/SendSMSCodePC').then(rs => {
	        if (rs.success) {
	        	this.form.securitycode = rs.result.securityCode;
	        	this.$message({
		          message: '验证码已发送，请注意查收',
		          type: 'success'
		        });
	        }
	      })
	    },
	    submitgo(formName){
	    	let me = this;
	    	this.$refs[formName].validate((valid) => {
	          if (valid) {
	            let params = this.form;
	            
	            this.post(params, 'services/app/applets/EnterpriseSetPwd').then(res => {
	            	console.log(res)
			        if (res.success) {
	            		this.succeeNot();
	            		this.$router.back(-1);
			        }else{
			        	me.failNot(res.error.message)
			        }
			    })
	          } else {
	            console.log('error submit!!');
	            return false;
	          }
	        });
	    },
	    
	    
	    //保存成功提示
	    succeeNot(){
	    	const h = this.$createElement;
	      	this.$notify({
	          title: '成功',
	          message: '密码设置成功',
	          type: 'success',
	          customClass:"el-notification-success"
	        });
	    },
	    //保存失败提示
	    failNot(mes){
	    	//console.log(meaasge)
	    	const h = this.$createElement;
	      	this.$notify.error({
	          title: '错误',
	          message: mes,
	          customClass:"el-notification-error"
	        });
	    }
	}
}
</script>

<style lang="scss" scoped>
	.content{
		padding: 80px 20px 30px 300px;
		a{
			color: #027dca;
		}
		.intwp{width: 300px;}
		.codeint{width: 186px;margin-right: 10px;}
		.dialog-footer{text-align: center;}
	}
	
</style>
<style type="text/css">
	.payoverview-dialogWp .el-dialog{
		width: 500px !important;
	}
	.paysetpwd_codeintwp{margin-bottom: -8px;}
	.paysetpwd_codeintwp .el-form-item__error{top: 50px;}
</style>